<template>
	<view class="taskDetail">
		<view class="safe_bar flex f_align_center">
			<view class="safa_ico">
				<image class="autoImg" src="/static/ico/safa2x.png" mode=""></image>
			</view>
			<view class="">赏金已托管，安全有保障！</view>
		</view>

		<view class="f f_column">
			<view class="f_top f f_align">
				<view class="bold">{{jobInfos.title}}</view>
				<view class="f_shrink0">赏{{jobInfos.amount}}金币</view>
			</view>
			<view class="f_botm f f_align f_align_center">
				<text>{{jobInfos.number - jobInfos.residueNumber}}人已赚</text>
				<text>剩{{jobInfos.residueNumber}}个名额</text>
				<text>144小时内审核</text>
			</view>
		</view>
		<view class="flex f_align f_align_center fb_user_info" >
			<view class="flex">
				<view class="fb_user_head">
					<image class="autoImg" :src="defaultHead(jobInfos.userHeadUrl)" mode=""></image>
				</view>
				<view class="flex f_column f_align">
					<view class="bold">{{jobInfos.userName}}</view>
					<view class="fb_time">{{jobInfos.createTime}}</view>
				</view>
			</view>
			<view class="gz_pro_btn" @click="gzJob">{{jobInfos.isConcern == '0' ? '已关注' : '关注任务' }}</view>
		</view>

		<view class="f f_column f_align f_bm_tj">
			<view class="bold">报名条件</view>
			<view class="">{{jobInfos.applyCondition}}</view>
		</view>

		<view class="step_main f f_column">
			<view class="s_f_top bold">步骤预览</view>
			<template v-for="(item,index) in jobInfos.stepList">
				<view class="f s_t_line" :key="index">
					<view class="s_t_r bold f_shrink0">{{index+1}}</view>
					<view class="">
						{{item.desc}}
					</view>
				</view>
				<view class="image_warps f">
					<image class="task_image" @click="$wathcImg([item.imgUrl])" :src="item.imgUrl" mode="widthFix"></image>
					<template v-if="jobInfos.isReceive == '0' && (jobInfos.receiveEntity.auditStatusType == '10010001' || jobInfos.receiveEntity.auditStatusType == '10010005')">
						<view
							v-if="item.uploadfile == '' || item.uploadfile == '-1'"
							class="uploadImage f f_column f_center f_align_center"
							@click="uploadImages(item)"
						>
							<i class="iconfont iconjianqu10"></i>
							<text>添加图片</text>
						</view>

						<view v-else class="task_image" @click="$wathcImg([item.uploadfile])">
							<image class="autoImg" :src="item.uploadfile" mode="widthFix"></image>
							<view class="icon_i f f_center f_align_center" @click="deleteImages(item)">
								<i class="iconfont iconlianhe49"></i>
							</view>
						</view>
					</template>
				</view>
			</template>
			<view class="f s_t_line">
				<view class="s_t_r bold f_shrink0">{{jobInfos.stepList.length+1}}</view>
				<view class="">请输入微信昵称</view>
			</view>
			<view class="image_warps f">
				<input class="wx_input" v-model="wxName" placeholder-class="placeStyle" type="text" placeholder="请输入微信昵称" />
			</view>
		</view>

		<view class="x_tips">
			小提示:请勿与他人私下交易,投资理财请防范风险,诱导兼职赚钱的都是骗子
		</view>

		<template v-if="jobInfos.receiveEntity && jobInfos.receiveEntity != null">
			<view v-if="jobInfos.receiveEntity.auditStatusType == '10010001' || jobInfos.receiveEntity.auditStatusType == '10010005'" class="biding_btn bold" @click="toRelaves()">上传任务</view>
			<view v-else-if="jobInfos.receiveEntity.auditStatusType == '10010002'" class="biding_btn bold disabled" @click="$showToast('正在审核中哦～')">待审核</view>
		</template>
		<view v-else class="biding_btn bold" @click="toRelaves()">立即报名</view>


		<toast :visible.sync="visibleShow">
			<view class="toast_show" slot="content">
				<view class="bold t_tt">任务步骤</view>
				<view class=" t_tt2">Task steps</view>
				<view class="f s_t_line">
					<view class="s_t_r bold f_shrink0">1</view>
					<view class="">
						<view class="">扫码先注册再下载</view>
						<view class="s_tips">看悬赏限制条件及悬赏步骤要求,确保能够完成后点击页面下方的“立即报名”。</view>
					</view>
				</view>
				<view class="f s_t_line">
					<view class="s_t_r bold f_shrink0">2</view>
					<view class="">
						<view class="">按步骤操作</view>
						<view class="s_tips">根据步骤要求进行操作,并进行截图。正确上传悬赏中所需要的截图及内容。</view>
					</view>
				</view>
				<view class="f s_t_line">
					<view class="s_t_r bold f_shrink0">3</view>
					<view class="">
						<view class="">正确提交</view>
						<view class="s_tips">检查上传截图及内容,无后点击“提交”,等待审核通过,发放赏金</view>
					</view>
				</view>
				<view @click="receiveJob" class="toast_btn">
					开始赚钱
				</view>
			</view>
		</toast>
	</view>
</template>

<script>
	import { _defaultHead } from '@/utils/util.js'
	import $uplaod from '@/utils/upload.js'
	export default {
		data() {
			return {
				jobId:'',
				visibleShow:false,

				jobInfos:{
					residueNumber:0,
					number:0,
					isConcern:'1',
					isReceive:'1',
					stepList:[],
					userHeadUrl:'',
					receiveEntity:null
				},
				wxName:''
			};
		},
		onLoad(option) {
			if(option){
				this.jobId = option.jobId;
			}
		},
		onShow() {
			this.getJobDetail();
		},
		methods:{
			async getJobDetail(){
				const _this = this;
				let res = (await _this.$http('/api/auth/job/getUserJob','POST',this.jobId)).data;
				console.log(res);
				if(res && res.code == '0'){
					let datas =  res.data;
					for(let i= 0;i<datas.stepList.length;i++){
						datas.stepList[i].uploadfile = '-1';
					}
					_this.jobInfos = datas;
					console.log(datas);
				}
			},
			//关注任务
			async gzJob(){
				const _this = this;
				let res = (await _this.$http('/api/auth/job/concernJob','POST',this.jobId)).data;
				if(res && res.code == '0'){
					_this.$showToast(_this.jobInfos.isConcern == '1' ? '关注成功' : '取消关注成功');
					if(_this.jobInfos.isConcern == '1'){
						_this.jobInfos.isConcern = '0';
					}else{
						_this.jobInfos.isConcern = '1';
					}
				}else{
					_this.$showToast(res.msg);
				}
			},
			//上传图片
			uploadImages(item){
				const _this = this;
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					success: async (res) => {
						item.uploadfile = await $uplaod(res.tempFilePaths[0]);
					}
				})
			},
			//去报名嘛 操作
			toRelaves(){
				const _this = this;
				if(_this.jobInfos.isReceive == '0' && _this.jobInfos.receiveEntity){
					_this.doDneTask();
				}else{
					_this.visibleShow = true;
				}
			},
			//领取任务
			async receiveJob(){
				const _this = this;
				if(_this.jobInfos.isReceive != '1'){
					return _this.$showToast('这个任务您已经领取了啦～');
				};
				let res = (await _this.$http('/api/auth/job/receiveJob','POST',{jobId:_this.jobId})).data;
				if(res && res.code == '0'){
					_this.$showToast('任务领取成功，快去做任务吧～');
					_this.visibleShow = false;
					_this.getJobDetail();
				}else{
					_this.$showToast(res.msg);
				}
			},
			defaultHead(url){
				return _defaultHead(url);
			},
			deleteImages(item){
				item.uploadfile = '-1';
			},
			//去完成任务
			async doDneTask(){
				const _this = this;
				if(_this.wxName == ''){
					return _this.$showToast('请先输入您的微信昵称哦～')
				};
				let list = _this.jobInfos.stepList;
				let stepImgList = [];
				for(let i=0;i<list.length;i++){
					stepImgList.push(list[i].uploadfile)
				};
				let res = (await _this.$http('/api/auth/job/submitReceiveJob','post',{
					id:_this.jobInfos.receiveEntity.id,
					wechatName:_this.wxName,
					stepImgList:stepImgList
				})).data;

				if(res && res.code == '0'){
					_this.$showToast('提交审核成功，等待审核中..');
					_this.getJobDetail();
				}else{
					_this.$showToast(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.taskDetail{
		width: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
		padding-bottom: 100rpx;
		.s_t_line{
			font-size: 28rpx;
			color: #343432;
			margin-top: 24rpx;
			.s_t_r{
				@include flex_center;
				width: 40rpx;height: 40rpx;
				border-radius: 50%;
				background-color:$ych_color;
				margin-right: 8rpx;
				color: #fff;
			}
			.s_tips{
				color: #999;
				font-size: 24rpx;
				margin-top: 8rpx;
			}
		}
		.toast_show{
			box-sizing: border-box;
			width: 560rpx;
			height: 794rpx;
			padding: 40rpx 24rpx;
			background:#fff url('/static/image/toastBg@2x.png') no-repeat center;
			background-size: 100% 100%;
			border-radius: 25rpx;
			.t_tt{
				font-size: 40rpx;
				color: #fff;
				margin-left: 20rpx;
			}
			.t_tt2{
				font-size: 32rpx;
				color: #fff;
				margin: 30rpx 0 60rpx 20rpx;
			}
			.toast_btn{
				width: 256rpx;
				background-color: $ych_color;
				font-size: 28rpx;
				color: #fff;
				padding: 13rpx 0;
				border-right: 8rpx;
				margin: 60rpx auto 0;
				@include flex_center;
				border-radius: 8rpx;
			}
		}
		.step_main{
			background-color: #fff;
			padding: 24rpx 24rpx 35rpx;
			.s_f_top{
				font-size: 32rpx;
				color: $ych_color;
			}
			.image_warps{
				padding-left: 48rpx;
				margin-top: 16rpx;
				.wx_input{
					box-sizing: border-box;
					width: 654rpx;height: 80rpx;
					padding-left: 24rpx;
					border: solid 1rpx #707070;
					color: #343432;
					border-radius: 8rpx;
				}
				.task_image{
					width: 320rpx;
					margin-right: 32rpx;
					position: relative;
					.icon_i{
						width: 42rpx;height: 42rpx;
						background-color: rgba($color: #000000, $alpha: 0.5);
						position: absolute;
						top:0;right: 0;
						color: #fff;
						.iconfont{
							transform: rotateZ(45deg);
						}
					}
				}
				.uploadImage{
					width: 160rpx;height: 160rpx;
					background-color: #F4F5F7;
					border-radius: 12rpx;
					font-size: 24rpx;
					color: #666666;
					.iconjianqu10{
						font-size: 52rpx;
						color: $ych_color;
						margin-bottom: 20rpx;
					}
				}
			}
		}
		.x_tips{
			padding: 24rpx;
			font-size: 24rpx;
			color: #999;
		}
		.biding_btn{
			width: 606rpx;
			height: 88rpx;
			background-color: $ych_color;
			border-radius: 12rpx;
			font-size: 30rpx;
			color: #fff;
			@include flex_center;
			margin:80rpx auto;
			@include box_shadow_btn;
			&.disabled{
				background-color: #B8B8B8;
				box-shadow: 0 8rpx 24rpx #B8B8B8;
			}
		}
		.f_bm_tj{
			padding: 24rpx 24rpx 70rpx;
			color: #999;
			font-size: 24rpx;
			background-color: #fff;
			border-bottom: solid 1rpx #F6F6F6;
			.bold{
				font-size: 32rpx;
				color: $ych_color;
				margin-bottom: 12rpx;
			}
		}
		.safe_bar{
			width: 100%;
			box-sizing: border-box;
			padding: 22rpx 24rpx;
			background-color:#F1F4F9;
			color: #30CF8D;
			font-size: 24rpx;
			.safa_ico{
				width: 34rpx;height: 34rpx;
				margin-right: 8rpx;
			}
		}
		.f_top{
			padding: 21rpx 24rpx;
			font-size: 30rpx;
			color: #E6212A;
			.bold{
				color: #1A1A1A;
				font-size: 36rpx;
			}
			border-bottom: solid 1rpx $ych_br_color;
		}
		.f_botm{
			padding: 16rpx 24rpx;
			font-size: 24rpx;
			color: #999;
			border-bottom: solid 12rpx #F6F6F6;
		}
		.fb_user_info{
			padding: 32rpx 24rpx;
			background-color: #fff;
			border-bottom: solid 1rpx $ych_br_color;
			.fb_user_head{
				width: 72rpx;height: 72rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				image{border-radius: 50%;}
			}
			.fb_time{font-size: 22rpx;}
			.gz_pro_btn{
				color: #fff;
				@include flex_center;
				background-color: $ych_color;
				padding: 8rpx 20rpx;
				border-radius: 8rpx;
			}
		}
	}
</style>
